<template>
  <el-dialog v-model="dialogFormVisible" :title="flag ? '新增' : '修改'">
    <el-form :model="form" label-width="auto" label-position="top" :inline="true" :rules="rules" ref="ruleFormRef"
      v-loading="isLoading" element-loading-text="数据加载中...">
      <el-form-item label="字段中文名" prop="fieldCnNm">
        <el-input clearable v-model="form.fieldCnNm" placeholder="请输入字段中文名" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="字段英文名" prop="fieldEnNm">
        <el-input clearable v-model="form.fieldEnNm" placeholder="请输入字段英文名" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="字段值类型" prop="fieldValueType">
        <el-select clearable v-model="form.fieldValueType" placeholder="请选择字段值类型" @change="form.comparisons = null"
          style="width: 200px">
          <el-option label="字符串" value="0" />
          <el-option label="数字" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="字段单位">
        <el-input clearable v-model="form.unit" placeholder="请输入字段单位" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="比较运算符" prop="comparisons">
        <el-select clearable v-model="form.comparisons" placeholder="请选择比较运算符" style="width: 200px">
          <el-option label="等于,不等于" value="等于,不等于" v-if="form.fieldValueType === '0'" />
          <el-option label="大于,小于,等于,大于等于,小于等于,不等于" value="大于,小于,等于,大于等于,小于等于,不等于" v-if="form.fieldValueType === '1'" />
        </el-select>
      </el-form-item>
      <el-form-item label="字段来源" prop="fieldSource">
        <el-select clearable v-model="form.fieldSource" placeholder="请选择字段来源" style="width: 200px">
          <el-option label="审批数据" value="0" />
          <el-option label="审批人信息" value="1" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">返回</el-button>
        <el-button type="primary" :disabled="isLoading" @click="addOrEdit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import api from "@/api"
import { ElMessage } from 'element-plus'

const rules = ref({
  fieldEnNm: [
    { required: true, message: '请输入字段英文名', trigger: 'blur' }
  ],
  fieldCnNm: [
    { required: true, message: '请输入字段中文名', trigger: 'blur' }
  ],
  fieldValueType: [
    { required: true, message: '请选择字段值类型', trigger: 'blur' }
  ],
  comparisons: [
    { required: true, message: '请选择比较运算符', trigger: 'blur' }
  ],
  fieldSource: [
    { required: true, message: '请选择字段来源', trigger: 'blur' }
  ],
})
const isLoading = ref(false)
const ruleFormRef = ref()
const flag = ref(false)
const dialogFormVisible = ref(false)
const form = ref({})

//初始化
const init = async (id) => {
  dialogFormVisible.value = true
  isLoading.value = true
  if (id) {
    flag.value = false
    const res = await api.post('/workflow/condition/queryById', { id })
    if (res.data.code === 200) {
      form.value = res.data.data
    } else {
      ElMessage.error(res.data.msg)
    }
  } else {
    flag.value = true
    form.value = {}
  }
  isLoading.value = false
}
const emit = defineEmits(['serversUpdated']);
//修改
const addOrEdit = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      isLoading.value = true
      let url
      if (flag.value) {
        url = '/workflow/condition/add'
      } else {
        url = '/workflow/condition/edit'
      }
      const res = await api.post(url, form.value)
      if (res.data.code === 200) {
        ElMessage.success(res.data.msg)
        emit('serversUpdated')
        dialogFormVisible.value = false
      } else {
        ElMessage.error(res.data.msg)
      }
      isLoading.value = false
    }
  })
}
defineExpose({
  init
});
</script>